import React, { useRef, useState } from 'react'
import html2canvas from 'html2canvas'


function welcome() {
  const html :any= useRef("")
  const [img,setImg]=useState('')
  const canvasHtml=()=>{
    html2canvas(html.current,{
      useCORS:true//开启跨域(https)
    }).then((canvas)=>{
      const url=canvas.toDataURL()
      setImg(url)
    })
  }
  return (
    <div>
      <div ref={html} style={{width:300,height:300}}>
        <img style={{width:300,height:300}} src="https://t13.baidu.com/it/u=2136372951,1347273637&fm=224&app=112&size=h200&n=0&f=PNG?sec=1677949200&t=ffa7fcb1e33aa0f9d06e66bd4c5ff790" alt="" />
      </div>
      <button onClick={canvasHtml}>点我绘制</button>
      <div>
        <img style={{width:300,height:300}} src={img} alt="" />
      </div>
    </div>
  )
}

export default welcome